import React, {useEffect, useRef, useState} from 'react'
import {Card} from 'antd'
import {GridContent} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table'
import moment from 'moment';
import {queryContractMangerPage, queryProtocolPersonnelPage, getContractSubjectList} from '../service';
import {newContractTypeStatusList, trainingMethodTypes} from "@/utils/constant";

const Contract = ({nativePlace, oid}) => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const [contractData, setContractData] = useState([]);
  const contractColumns = [
    {
      title: '合同类型',
      dataIndex: 'contractType',
      render: (text) => {
        return newContractTypeStatusList.find(item => item.value === parseInt(text))?.label;
      }
    },
    {
      title: '合同地址',
      dataIndex: 'contractOssUrl',
      hideInSearch: true,
      render: (text) => {
        return <a href={text} target="_blank">{text}</a>
      }
    },
    {
      title: '签订时间',
      dataIndex: 'signDate',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '合同开始时间',
      dataIndex: 'contractBeginDate',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
    {
      title: '合同结束时间',
      dataIndex: 'contractEndDate',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? moment(text).format('YYYY-MM-DD') : ''
      },
    },
  ];
  const protocolColumns = [
    {
      title: '项目名称',
      dataIndex: 'projectName',
    },
    {
      title: '培训机构',
      dataIndex: 'trainingStructure',
      hideInSearch: true,
      align: 'center',
    },
    {
      title: '培训起止时间',
      dataIndex: 'trainingTime',
      hideInSearch: true,
      valueType: 'dateRange',
      render: (text, record) => {
        return moment(new Date(record.trainingStartTime)).format('YYYY-MM-DD') + ' ~ ' + moment(new Date(record.trainingEndTime)).format('YYYY-MM-DD')
      },
    },
    {
      title: '培训方式',
      dataIndex: 'trainingMethod',
      hideInSearch: true,
      valueEnum: {
        0: {text: trainingMethodTypes[0].label},
        1: {text: trainingMethodTypes[1].label},
        2: {text: trainingMethodTypes[2].label},
      },
    },
    {
      title: '培训学杂费',
      dataIndex: 'trainingSpending',
      hideInSearch: true,
    },
    {
      title: '往返交通住宿伙食费',
      dataIndex: 'trainingFoodSpending',
      hideInSearch: true,
    },
    {
      title: '培训费用合计',
      dataIndex: 'trainingTotal',
      hideInSearch: true,
    },
    {
      title: '甲方主体',
      dataIndex: 'companyId',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' && contractData.find(item => item.id === text)?.name
      }
    },
    {
      title: '服务期限起止日期',
      dataIndex: 'serviceTime',
      hideInSearch: true,
      render: (text, record) => {
        return `${moment(new Date(record.serviceStartTime[0])).format('YYYY-MM-DD')} ~ ${moment(new Date(record.serviceEndTime[1])).format('YYYY-MM-DD')}`
      },
    },
    {
      title: '签订合同日期',
      dataIndex: 'signedTime',
      hideInSearch: true,
      render: (text) => {
        return text !== '-' ? `${moment(new Date(text)).format('YYYY-MM-DD')}` : '';
      },
    },
    {
      title: '培训地点',
      dataIndex: 'trainingLocation',
      hideInSearch: true,
      render: (text) => {
        let placeList = nativePlace;
        let showStr = '';
        text.split(',').forEach(item => {
          for (let place of placeList) {
            if (parseInt(item) === place.value) {
              showStr += place.title;
              placeList = place.children && place.children;
              break;
            }
          }
        });
        return showStr;
      }
    },
    {
      title: '培训协议地址',
      dataIndex: 'contractOssUrl',
      hideInSearch: true,
      render: text => (<a href={text} target="_blank">{text}</a>)
    },
  ];

  useEffect(() => {
    //获取合同主体
    getContractSubjectList().then(res => {
      setContractData(res);
    });
  }, []);

  return (
    <>
      <GridContent>
        <Card title="合同信息" style={{marginBottom: 24}} bordered={false}>
          <ProTable
            actionRef={actionRef}
            rowKey="id"
            request={(params) => queryContractMangerPage(params, oid)}
            columns={contractColumns}
            search={false}
            options={false}
            toolBarRender={false}
          />
        </Card>
        <Card title="协议信息" style={{marginBottom: 24}} bordered={false}>
          <ProTable
            actionRef={actionRef2}
            rowKey="id"
            request={(params) => queryProtocolPersonnelPage(params, oid)}
            columns={protocolColumns}
            search={false}
            options={false}
            toolBarRender={false}
          />
        </Card>
      </GridContent>
    </>
  );
};
export default Contract;
